<template>
	<view class="goodsDetail">
		<view class="swiperbox">
			<u-swiper
				radius="0"
				:list="info.images"
				@click="clickSwiper"
				:indicatorStyle="{ right: '32rpx', bottom: '24rpx' }"
				:indicator="true"
				indicatorMode="dot"
				indicatorInactiveColor="#cacad1"
				indicatorActiveColor="#9695A3"
				imgMode="heightFix"
				height="750rpx"
				bgColor="#F5F7F9"
			></u-swiper>
		</view>
		<view class="tipbox" v-if="false">
			<image class="bg" src="@/static/images/djsbj.png"></image>
			<view class="lbox">
				<text>{{ info.price_sale || '' }}</text>
				<text class="j-sc">{{ info.price_market || '' }}</text>
			</view>
			<view class="rbox">
				<text>距结束还剩：</text>
				<view class="innerbox">
					<djs bgColor="#000000"></djs>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="card card1">
				<text class="line-2">{{ info.title || '' }}</text>
				<view class="row-2">
					<view class="box">
						<text class="jg">{{ info.jifen || 0 }}积分</text>
						<text class="kc" style="margin-left: 20rpx" v-if="info.key_vals">{{ info.key_vals || '' }}</text>
					</view>
					<text class="kc">库存：{{ info.kucun || 0 }}</text>
					<text class="line-1 fk" v-if="info.orders != 0">{{ info.orders || 0 }}+付款</text>
				</view>
			</view>
			<view class="card">
				<view class="formitem">
					<label>物流</label>
					<input type="text" value="48小时内从浙江省发货，包邮" :disabled="true" />
				</view>
				<view class="formitem" @click="show = true">
					<!-- <label>选择</label>
					<input v-model="productType.key_vals" type="text" placeholder="选择规格" placeholder-class="plc" :disabled="true" />
					<image src="@/static/images/right.png" mode="aspectFit"></image> -->
					<label>规格</label>
					<input v-model="info.key_vals" type="text" placeholder="选择规格" placeholder-class="plc" :disabled="true" />
					<image src="@/static/images/right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="card">
				<view class="headbox">
					<view class="lbox">
						<text>评价</text>
						<text v-if="info.comment_num">({{ info.comment_num }}+)</text>
						<text v-else>( 暂无 )</text>
					</view>
					<view class="rbox" @click="toNav(`goods/goodsPingJia?id=${info.productId}`)">
						<!-- 	<text>好评度</text>
						<text>100%</text> -->
						<image src="@/static/images/right.png" mode="aspectFit"></image>
					</view>
				</view>

				<pjlist :list="comment_list"></pjlist>
				<u-loadmore :status="status" />
				<view class="ckqb" v-if="comment_list.length">
					<button @click="toNav(`goods/goodsPingJia?id=${info.productId}`)">查看全部评价</button>
				</view>
			</view>
			<view class="card">
				<view class="headbox">
					<view class="lbox">
						<text>产品简介</text>
					</view>
				</view>

				<view class="u-content">
					<u-parse :lazy-load="true" :content="info.content"></u-parse>
				</view>
			</view>
		</view>
		<u-loading-page :loading="loading" loadingText="加载中" iconSize="32"></u-loading-page>
		<u-popup :show="show" round="16rpx" :closeable="true" @close="show = false">
			<view class="sizebox">
				<view class="goodsbox">
					<image :src="productType.image || info.images[0]" mode=""></image>
					<view class="info">
						<text>{{ info.title || '' }}</text>
						<!-- <text>库存：{{ productType.kucun || info.kucun }}</text> -->
						<view class="box">
							<text>￥{{ productType.price_sale || info.price_sale }}</text>
							<!-- <text v-if="productType.hasOwnProperty('kucun')">库存：{{ productType.kucun }}</text> -->
							<text>{{ info.key_vals || '' }}</text>
						</view>
					</view>
				</view>

				<view class="typesbox-warp">
					<view :class="['typesbox', { 'flex-between': item.active }]" v-for="(item, index) in info.spec" :key="index">
						<view class="title">{{ item.title || '' }}</view>
						<view class="list">
							<view
								:class="['item', { active: isActive(val, item) }, { two: item.childs.length === 2 && item.title == '款式' }]"
								@click="getpopitem(val, item)"
								v-for="(val, i) in item.childs"
								:key="i"
							>
								<text>{{ val.title }}</text>
							</view>
						</view>
					</view>

					<view :class="['typesbox flex-between']">
						<view class="title">数量</view>
						<view>
							<u-number-box v-model="form.num" @change="valChange"></u-number-box>
						</view>
					</view>
				</view>
				<!-- <footer-btn buy cart text="立即购买" @submit="submit"></footer-btn> -->
				<footer-btn text="立即购买" @submit="submit"></footer-btn>
			</view>
		</u-popup>
		<footer-btn buy text="立即购买" @submit="submit"></footer-btn>
	</view>
</template>

<script>
import { updata_car_count, get_userInfo } from '@/common/common_fun.js';
import API from '@/common/api';
export default {
	name: 'goodsDetail',
	computed: {
		isActive() {
			return (val, fitem) => {
				if (this.selectList.find((item) => item.id === val.id)) {
					return true;
				} else {
					return false;
				}
			};
		},

		setGuiGe() {
			return (val1, val2) => {
				return val1 || val2;
			};
		}
	},
	data() {
		return {
			id: '',
			loading: true,
			show: false,
			status: '',
			info: {
				images: []
			},
			productType: {},
			selectList: [],
			form: {
				num: 1
			},
			comment_list: [],
			comment_paging: {
				page: 1,
				pagenum: 5
			}
		};
	},
	onLoad(data) {
		this.id = data.id || 30301;
		this.init();
	},
	onShow() {
		get_userInfo((data) => {
			this.user_info = data;
			console.log(data, 'user_info');
		});
	},
	methods: {
		clickSwiper(e) {
			this.look(this.info.images[e], this.info.images);
		},

		init() {
			this.loading = true;
			API.getJson('money_jifenPdtInfo', { inventoryId: this.id }).then((res) => {
				this.loading = false;
				const { code, data, message } = res;
				if (code === 1) {
					this.getComments(data.productId);
					this.info = data;
				} else {
					this.j_modal(message, () => {
						this.toBack();
					});
				}
			});
		},

		getComments(productId) {
			API.getJson('product_comments', { productId, ...this.comment_paging }).then((res) => {
				const { code, data, message, count } = res;
				if (code === 1) {
					if (data.length !== 0) this.comment_list = this.comment_list.concat(data);
					if (this.comment_paging.pagenum === data.length) {
						this.comment_paging.page += 1;
						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
					console.log(data, 'product_comments');
				}
			});
		},
		submit(flag) {
			if (this.info.kucun === 0 || this.form.num > this.info.kucun) {
				this.msg('该商品库存不足');
				return;
			}
			this.setOrder();
		},

		setOrder() {
			let product_info = {
				...this.form,
				title: this.info.title,
				image: this.info.image || this.info.images[0],
				inventoryId: this.info.inventoryId,
				productId: this.info.productId,
				key_vals: this.info.key_vals,
				price_sale: this.info.jifen,
				if_refund: this.info.if_refund || 0
			};
			console.log(product_info);
			// return
			uni.setStorageSync('jforder_info', [product_info]);
			this.toNav(`jifenshangcheng/jfqrOrder`);
		},

		addCart() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			API.getJson('gouwuche_add', {
				inventoryId: this.info.inventoryId,
				num: this.form.num
			}).then((res) => {
				uni.hideLoading();
				console.log(res, 'gouwuche_add');
				const { code, data, message } = res;
				if (code === 1) {
					updata_car_count();
					uni.showToast({
						title: message
					});
				}
			});
		},
		pipei() {
			let inventorys = this.info.inventorys;
			let keys = '';
			if (inventorys.length === 0) return;
			if (this.selectList.length === this.info.spec.length) {
				keys = this.selectList.map((item) => item.id).join('-');
				this.productType = inventorys.find((val) => val.key_ids === keys);
				console.log(this.productType);
			}
		},

		getpopitem(item, fu) {
			if (this.selectList.find((val) => val.parentId === item.parentId)) {
				this.selectList.forEach((val, i) => {
					if (val.parentId === item.parentId) this.selectList.splice(i, 1, item);
				});
			} else {
				this.selectList.push(item);
			}
			this.pipei();
			console.log(this.selectList, '选择的');
		},

		valChange(e) {
			console.log(e);
		}
	}
};
</script>

<style lang="less" scoped>
.goodsDetail {
	.sizebox {
		max-height: 100vh;

		padding: 40rpx 32rpx;
		.typesbox-warp {
			overflow: auto;
			max-height: calc(100vh - 80rpx - 168rpx - 168rpx);
		}
		.typesbox + .typesbox {
			border-top: 1px solid #f3f4f8;
		}
		.typesbox {
			padding: 30rpx 0;
			.title {
				padding-bottom: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.list {
				display: flex;
				flex-wrap: wrap;

				.item {
					.flex-center();
					min-width: 158rpx;
					padding: 0 16rpx;
					height: 64rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					background: #f5f7f9;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				.two {
					width: 334rpx;
					height: 64rpx;
					background: #f5f7f9;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}
				.two:nth-of-type(2n) {
					margin-right: 0 !important;
				}
				.active {
					background: #e54e4e;
					color: #ffffff;
				}
				.item:nth-of-type(4n) {
					margin-right: 0 !important;
				}
			}
		}
		.goodsbox {
			display: flex;
			padding-bottom: 34rpx;
			border-bottom: 1px solid #f3f4f8;
			image {
				width: 168rpx;
				height: 168rpx;
				background: #f8f8f8;
				// flex-shrink: 0;
			}
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 24rpx;
				padding-right: 20rpx;
				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
				.box {
					.flex-between();
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					text:nth-of-type(2) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					text:nth-of-type(3) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
		}
	}
	.container {
		padding: 16rpx 32rpx;
		padding: 16rpx 24rpx;
		.u-content {
			padding-top: 24rpx;
			/deep/image {
				display: block;
			}
			/deep/img {
				display: block;
			}
		}
		.ckqb {
			display: flex;
			justify-content: center;
			button {
				margin: 0;
				width: 228rpx;
				height: 56rpx;
				background: #ffffff;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				border: 2rpx solid #e1e3e8;

				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9695a3;
			}
		}
		.card + .card {
			margin-top: 16rpx;
		}
		.card {
			min-height: 176rpx;
			padding: 34rpx 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.headbox {
				.flex-between();
				& > .lbox {
					text:nth-of-type(1) {
						margin-right: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					text:nth-of-type(2) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9695a3;
					}
				}
				& > .rbox {
					display: flex;
					align-items: center;
					text:nth-of-type(1) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9695a3;
					}
					text:nth-of-type(2) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					image {
						width: 13rpx;
						height: 24rpx;
						margin-left: 16rpx;
					}
				}
			}
			.formitem + .formitem {
				padding-top: 28rpx;
			}
			.formitem {
				display: flex;
				align-items: center;
				label {
					width: 88rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
				input {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				.plc {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #9695a3;
				}
				image {
					width: 13rpx;
					height: 24rpx;
				}
			}
		}
		.card1 {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			& > text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.kc {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.fk {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9695a3;
			}
			.row-2 {
				margin-top: 14rpx;
				.flex-between();
				.jg {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}
		}
	}
	.tipbox {
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 1;
		width: 750rpx;
		height: 130rpx;
		padding: 22rpx 32rpx;
		.lbox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text:nth-of-type(1) {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #ffffff;
				&:before {
					content: '￥';
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #ffffff;
				}
			}
			text:nth-of-type(2) {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				&:before {
					content: '￥';
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
			}
		}
		.rbox {
			flex: 1;
			text-align: right;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			& > text:nth-of-type(1) {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
			.innerbox {
				display: flex;
				justify-content: flex-end;
			}
		}
		.bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 130rpx;
		}
	}
}
</style>
